<script setup>
import { ref, onBeforeUnmount, onMounted, computed } from 'vue';
import { useRouter ,useRoute} from 'vue-router';
let route = useRoute()
let isActive = ref('')
let navItems = ref([
    { path: '/', text: '首页' },
    { path: '', text: '产品与服务', },
    { path: '/cooperate', text: '合作伙伴招募' },
    // { path: '1', text: '社区' },
    { path: '/helpCenter', text: '帮助中心' },
    { path: '/aboutUs', text: '关于我们' },
])

onMounted(() => {
    isActive.value = route.path
})
const chandleClick =(text)=>{
    if(text == '产品与服务'){
        window.location.href = "https://ai.a100-cn.com/#/"
    }
}
const login = ()=>{
    window.location.href = "https://ai.a100-cn.com/#/login"
}
const enroll =()=>{
    window.location.href = "https://ai.a100-cn.com/#/register"
}
</script>
<template>
    <div class="head">
        <div class="left">
            <div class="imgBox">
                <img src="@/assets/images/newImg/logo.png" alt="#">
            </div>
            <nav>
                <ul>
                    <router-link :to="item.path" v-for="item in navItems" :key="item.path" @click="chandleClick(item.text)">
                        <li :class="{ 'isActive': isActive == item.path }">{{ item.text }}</li>
                    </router-link>
                </ul>
            </nav>
        </div>
        <div class="right">
            <el-button text color="#fff" @click="login">
                登录
            </el-button>
            <el-button type="primary" color="#2F54EB" @click="enroll">立即注册</el-button>
        </div>
    </div>

</template>
<style lang="scss" scoped>
@media (max-width: 768px) {
    .head {
        width: 1400px !important;
    }
}

.head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 0 30px 0 50px;
    box-sizing: border-box;
    line-height: 40px;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.05);
    .left {
        display: flex;
        align-items: center;

        .imgBox {

            img {
                width: 100%;
                display: block;
            }
        }

        nav {
            margin-left: 30px;

            ul {
                display: flex;
                justify-content: end;
                align-items: center;
                padding: 10px 0;
                box-sizing: border-box;


                li {
                    margin-right: 30px;
                    font-weight: 600;
                    border-bottom: 3px solid transparent;
                    cursor: pointer;
                    color: #000;
                }

                li:hover {
                    border-bottom: 3px solid #2F54EB;
                    color: #2F54EB;
                    transition: all 0.5s;

                }

                .isActive {
                    border-bottom: 3px solid #2F54EB;
                    color: #2F54EB;
                    transition: all 0.5s;
                }


            }
        }


    }

    .right {


        .iconBox {
            margin-right: 20px;
        }
    }
}
</style>